<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>订单上传 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />
<link href="../source/js/lib/webuploader/webuploader.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="order-down-page">
        <!--<div class="header">
            <div class="base-width cf">
                <a href="./main.html" class="fl">
                    <img class="logo" src="../source/img/logo.png" alt="" />
                </a>

                <el-dropdown class="username fr" v-if="username" v-cloak>
                      <span class="el-dropdown-link">
                        {{username}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                      </span>
                    <el-dropdown-menu class="username-dropdown" slot="dropdown">
                        <el-dropdown-item>
                            <a href="javascript:;" @click="loginout">退出</a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>-->
        <asn-header></asn-header>

        <div class="base-width">
            <div class="banner">
                <img src="../source/img/order_upload_banner.png" alt="">
            </div>

            <div class="btn-box tc upload" >
                <div class="path cf">
                    <el-input v-model="uploadData.file"  class="filePath" ></el-input>
                    <div id="filePicker">路径选择</div>
                </div>
                <div class="start-upload-box">
                    <el-button type="primary" class="start-upload-btn" @click="startUpload">订单上传</el-button> <span class="tip mt10">（xls/xlsx格式）</span>
                </div>

            </div>
        </div>
    </div>


<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/common.js"></script>
<script src="../source/js/lib/webuploader/webuploader.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            "username":decodeURIComponent(getCookie('username')),
            uploadData:{
                "file":"",
                "username":decodeURIComponent(getCookie('username')),
                "pwd":"",
                "account":user.account
            },
            uploader:null
        },
        methods: {
            initUploader:function(){
                var _this = this;

                this.uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    server: apiUrl2+'/UploadOrder',
                    method:'POST',
                    auto: false,
                    swf:'../source/js/lib/webuploader/Uploader.swf',
                    pick: {
                        id:'#filePicker',
                        multiple:false
                    },
                    // prepareNextFile:true,
                    formData:{'json':JSON.stringify(_this.uploadData)},
                    // fileNumLimit:1,
                    // threads:1,
                    accept: {
                        title: 'excel',
                        extensions: 'xls,xlsx',
                        mimeTypes: '.xls,.xlsx'
                    }
                });


                _this.uploader.on( 'fileQueued', function( file ) {

                    _this.uploadData.file = file.name;

                    if(!/.(xls|xlsx)$/.test(file.name)){
                        _this.$message.error('上传的文件只能是xls或xlsx文档！');
                        return false;
                    }

                    if(file.size / 1024 / 1024 > 5){
                        _this.$message.error('上传文件大小不能超过 5MB!');
                        return false;
                    }

                    // 设置参数
                    _this.uploader.option( 'formData',{'json':JSON.stringify(_this.uploadData)});

                    // _this.$nextTick(function(){
                    //     _this.uploader.upload();
                    // });
                });

                _this.uploader.on( 'uploadProgress', function( file,percentage ) {
                    _this.$message.info('文件上传中，请勿刷新页面！');
                    // console.log('percentage',file,percentage);
                });

                _this.uploader.on( 'uploadSuccess', function( file,response ) {
                    if(response.Success === true){
                        _this.$message.closeAll();
                        _this.$message.success('恭喜，文件上传成功！');
                    }else{
                        _this.$message.closeAll();
                        _this.$message({
                            showClose: true,
                            type:'error',
                            duration:0,
                            message:response.Msg
                        });
                    }
                });

                _this.uploader.on( 'uploadError', function() {
                    _this.$message.closeAll();
                    // _this.$message.error('上传失败，请重试！');
                    _this.$message({
                        showClose: true,
                        type:'error',
                        duration:0,
                        message:'上传失败，请重试！'
                    });
                });

                _this.uploader.on( 'uploadComplete', function() {
                    _this.uploader.reset();
                });

            },
            startUpload:function(){
                this.uploader.upload();
            },
           /* isLogin:function(){
                var username = getCookie('username');
                var type = getCookie('type');
                if(username && username != 'undefined' && type &&  type != 'undefined'){
                    return true;
                }
                return false;
            },
            loginout:function(){
                removeCookie('username');
                removeCookie('type');
                location.href='./login.html';
            }*/
        },
        created:function(){
            /*if(!this.isLogin()){ //登录
                location.href = './login.html';
            }*/
        },
        mounted:function(){
            this.initUploader();
        }
    })
</script>
</body>
</html>